import { EditMenu } from "@/components/form/menu/edit.menu"
import { FormModal } from "@/components/modal/form.modal"
import { Field_Reset, Field_Search, Field_keyword } from "@/components/utils/field.list"
import adminMenuService from "@/services/admin.menu.service"
import { StoreContext } from "@/store"
import { ExclamationCircleFilled } from "@ant-design/icons"
import { AsyncModal, EnumRender, FormRender, IndexRender, IDRender, ListTable, OperateRender } from "@whzhuke/antd"
import { arrayCommon } from "@whzhuke/common"
import { MenuType } from "@whzhuke/interface"

import { useMobx } from "@whzhuke/mobx"
import { Button, Col, Modal, Row, Space, message } from "antd"
import { useForm } from "antd/es/form/Form"
import React, { useCallback, useContext } from "react"
const { confirm } = Modal
const Page = useMobx(() => {
  const [form] = useForm()
  const { ListStore } = useContext(StoreContext)
  const titleRender = useCallback(() => {
    return (
      <Row justify="space-between" align="middle">
        <Col>管理菜单列表</Col>
        <Col>
          <Space size="middle">
            <Button type="primary" onClick={EditModal()}>
              添加菜单
            </Button>
          </Space>
        </Col>
      </Row>
    )
  }, [])
  const onReset = useCallback(() => ListStore.setParams(adminMenuService.list, {}), [])
  const onFinish = useCallback(data => ListStore.setParams(adminMenuService.list, data), [])
  const EditModal = useCallback(
    (val?, item?) => async () => {
      const done = await AsyncModal({
        content: FormModal,
        params: {
          formEle: EditMenu,
          formProps: {
            values: item
          },
          title: item ? "编辑菜单" : "新增菜单"
        }
      })
      if (done) {
        ListStore.updateList(adminMenuService.list)
      }
    },
    []
  )
  const DeleteItem = useCallback(
    val => () => {
      confirm({
        title: "确定删除?",
        content: "会导致相关角色的用户出现异常",
        okButtonProps: { danger: true },
        icon: <ExclamationCircleFilled />,
        async onOk() {
          try {
            await adminMenuService.del({ id: val })
            ListStore.updateList(adminMenuService.list)
          } catch {
            message.error("删除失败")
          }
        }
      })
    },
    []
  )

  const transformData = useCallback(data => {
    return arrayCommon.doTree(data, "id", "parentId")
  }, [])

  return (
    <Row>
      <Col span={24}>
        <FormRender form={form} onReset={onReset} onFinish={onFinish} layout="inline" fieldList={[Field_keyword, Field_Search, Field_Reset]} />
      </Col>
      <Col span={24}>
        <ListTable
          minHeight={400}
          pagination={false}
          title={titleRender}
          apiColumns={[
            IDRender("id", 100),
            ["menuName", "名称"],
            ["url", "地址"],
            ["sort", "序号"],
            [
              "id",
              "操作",
              OperateRender([
                ["编辑", EditModal],
                ["删除", DeleteItem]
              ]),
              { width: 80, fixed: "right" }
            ]
          ]}
          transformData={transformData}
          apiService={adminMenuService.list}
        />
      </Col>
    </Row>
  )
})

export default Page
